<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <h2>角色权限设置</h2>
                <hd-alert class="text-2xl py-3" :alert="{type:'warning'}">您正在设置【{{ role.title }}】的权限</hd-alert>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item :label="permission.title" v-for="(permission,ind) in permissions" :key="ind">
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item>

                            <template slot="title">
                                {{ permission.title }}
                            </template>
                            <div class="grid grid-cols-6 gap-2 my-3 p-2">
                                <div v-for="(item, i) in permission.rules" :key="i">
                                <span class="border-b-4 border-red-500 ">
                                    <input type="checkbox" :id="item.name" :value="item.name"
                                           v-model="form.permissions">
                                    <label :for="item.name">{{ item.title }}--{{ item.name }}</label>
                                </span>
                                </div>
                            </div>

                        </el-collapse-item>
                    </el-collapse>
                </el-form-item>

            </el-form>
            <el-button type="success" @click="onSubmit">提交</el-button>

        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {path: 'role/:rid/permission',meta:{title:'权限编辑'}},
    data() {
        return {
            tabs,
            permissions: [],
            form: {permissions: []},
            id: this.$route.params.rid,
            activeName: 2,
            role: {}
        }
    },

    async created() {
        //当前角色
        this.role = await this.axios.get(`admin/role/${this.id}`)
        //当前角色的权限
        this.form.permissions = await this.axios.get(`admin/role/${this.id}/permissions`)
        //所有的权限表
        this.permissions = await this.axios.get('admin/permission')

    },
    methods: {
        async onSubmit() {
            await this.axios.put(`admin/role/${this.id}/permission`, this.form)
            this.$router.push({path: `/admin/role/index`})
        }
    }

}
</script>

<style scoped>

</style>
